<template>
  <div class="rightNoAir">
    <div class="account">
        <el-button>
          <i class="icon iconfont icon-yijianfankui"></i>
          <p>账号</p>
        </el-button>
        <div class="registerPop">
            <div class="registerPop-top">
                <p>新人登录更多豪礼</p>
            </div>
            <div class="registerPop-img">
                <img src="../../../static/images/daLogo.png" alt="Logo">
            </div>
            <div class="registerPop-fun">
                <p>你好！请<span>登录</span>|<span>注册</span></p>
            </div>
            <div class="principal">
                <div class="principal-left">
                    <div class="principal-center" style="text-align:  center;">
                        <i class="icon iconfont icon-order"></i>
                        <p>我的订单</p>
                    </div>
                </div>
                <div class="principal-right">
                    <div class="principal-center" style="text-align:  center;">
                        <i class="icon iconfont icon-6"></i>
                        <p>我的信息</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="account" @click="feedback()">
      <el-tooltip class="item" effect="dark" content="会员反馈" placement="left">
        <el-button>
          <i class="icon iconfont icon-yijianfankui"></i>
          <p>反馈</p>
        </el-button>
      </el-tooltip>
    </div>
    <div class="account">
      <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1993117505&site=qq&menu=yes">
        <el-tooltip class="item" effect="dark" content="联系客服" placement="left">
          <el-button>
            <i class="icon iconfont icon-service"></i>
            <p>客服</p>
          </el-button>
        </el-tooltip>
      </a>
    </div>
    <div class="account" @click="backTop()" v-show="backTopShow">
      <el-tooltip class="item" effect="dark" content="返回顶部" placement="left">
        <el-button>
          <i class="icon iconfont icon-return-top-b-o"></i>
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: "rightNoAir",
  data() {
    return {
      backTopShow: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    backTop() {
      let back = setInterval(() => {
        if (document.body.scrollTop || document.documentElement.scrollTop) {
          document.body.scrollTop -= 200;
          document.documentElement.scrollTop -= 200;
        } else {
          clearInterval(back);
        }
      });
    },
    handleScroll() {
      if (document.documentElement.scrollTop + document.body.scrollTop > 200) {
        this.backTopShow = true;
      } else {
        this.backTopShow = false;
      }
    },
    //点击反馈
    feedback(){
      this.$router.push({ name: "feedback"});
    }
  }
};
</script>

<style lang="less" scoped>
.rightNoAir {
  border-radius: 2px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  .el-button {
    width: 60px;
    display: flex;
    justify-content: center;
    align-content: center;
    height: 60px;
    background-color: #343436;
    color: #ffffff;
    font-size: 14px;
    i {
      font-size: 24px;
      color: #ffffff;
    }
    p {
      padding-top: 6px;
    }
  }
  .account {
    background-color: #343436;
    margin-bottom: 20px;
    opacity: 0.5;
    position: relative;
    .registerPop{
        width: 200px;
        height: 217px;
        background-color: #ffffff;
        position: absolute;
        left: -202px;
        top: 0px;
        opacity: 1;
        z-index: 999;
        border: 1px solid #f2f2f2;
        box-shadow: 0px 5px 5px #343436;
        display: none;
        .principal{
            width: 100%;
            height: 57px;
            background-color: #f2f2f2;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            .principal-left{
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                
                i{
                    font-size: 24px;
                }
                p{
                    padding-top: 8px;
                }
            }
            .principal-right{
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                i{
                    font-size: 24px;
                }
                p{
                    padding-top: 8px;
                }
            }
        }
        .registerPop-top{
            text-align: center;
            height: 40px;
            line-height: 40px;
            p{
                font-size: 14px;
                letter-spacing: 1px;
                font-weight: 600;
            }
        }
        .registerPop-img{
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 80px;
                height: 80px;
            }
        }
        .registerPop-fun{
            width: 100%;
            line-height: 40px;
            p{
                text-align: center;
                font-size: 13px;
            }
        }
        .registerPop-fun span:nth-child(1){
            color: #EC692D;
            padding: 0px 5px;
        }
        .registerPop-fun span:nth-child(2){
            color: #EC692D;
            padding: 0px 5px;
        }
    }
  }
  .account:hover {
    cursor: pointer;
    background-color: rgb(84, 92, 100);
    opacity: 1;
  }
  .account:hover .registerPop{
      display: block;
  }
}
</style>


